<template>
    <div class="home-container">
        <aside :class="[isCollapse && 'collapse']">
            <header v-if="!isCollapse">雲效客户管理系统</header>
            <header v-if="isCollapse" class="hed">雲效</header>
            <section>
                <el-menu ref="myMenu"
                    active-text-color="#E5EAF3"
                    background-color="@asid"
                    text-color="#CFD3DC"
                    :collapse="isCollapse"
                    :default-active="activeKey"
                    @select="menuSelectEvt">
                    <el-sub-menu v-for="it in menuList" :index="it.index" :key="it.index">
                        <!-- #是v-slot:的简写 #title === v-slot:title -->
                        <template #title>
                            <el-icon>
                                <home-filled v-if="it.icon === 'home'"/>
                                <UserFilled v-else-if="it.icon === 'user'"/>
                                <goods v-else-if="it.icon === 'ShoppingTrolley'"/>
                            </el-icon>
                            <span>{{it.name}}</span>
                        </template>
                        <el-menu-item v-for="menu in it.children"
                            :index="menu.index"
                            :key="menu.index">{{menu.name}}</el-menu-item>
                    </el-sub-menu>
                </el-menu>
            </section>
        </aside>
        <main>
            <nav>
                <el-button @click="isCollapse = !isCollapse" :icon="isCollapse ? 'expand' : 'fold'"/>
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item><slot name="routeF"/></el-breadcrumb-item>
                    <el-breadcrumb-item><a><slot name="routeS"/></a></el-breadcrumb-item>
                </el-breadcrumb>
                <div style="position: absolute;right: 100px;color: rgb(154, 156, 158, .5);font-size: .8rem;">
                    欢迎{{ user.id }}回家
                </div>
                <button style="position: absolute; right: 20px;
                    border: none;width: 60px;border-radius: 10px;
                    padding: 10px 0;
                    color: white;
                    background: #2a8aea;"
                    @click="quit"    
                >
                    退出
                </button>
    
            </nav>
            
            <article>
                <slot/>
                
            </article>
        </main>
    </div>
</template>

<script setup>
import { computed, onBeforeUnmount, onMounted, onUnmounted, ref } from 'vue'
import { useStore } from 'vuex'
import { useRoute, useRouter } from 'vue-router'

/* 模拟菜单数据对象 */
const menuList = [
    {index: '0', name: '首页', icon: 'home', children: [
        {index: '0-1', name: '首页看板', path: '/home'}
    ]},
    {index: '1', name: '客户管理', icon: 'user', children: [
        {index: '1-1', name: '客户列表', path: '/customer/list'},
        {index: '1-2', name: '客户编辑', path: '/customer/edit'},
        
    ]},
    {index: '2', name: '产品管理', icon: 'ShoppingTrolley', children: [
        {index: '2-1', name: '产品列表', path: '/goods/list'},
        {index: '2-2', name: '产品编辑', path: '/goods/edit'}
    ]},
    
]

const router = useRouter()
const route = useRoute()
const store = useStore()

const isCollapse = ref(false)
const activeKey = ref('')

const myMenu = ref(null)

const user = computed(function() {
    return store.getters['common/userInfo']
})

onMounted(function() {
    let openKey = '', selectKey = '';
    for (let it of menuList) {
        for (let menu of it.children) {
            if (menu.path === route.path) {
                selectKey = menu.index
                break
            }
        }
        if (!!selectKey) {
            openKey = it.index
            break
        }
    }
    myMenu.value.open(openKey)
    activeKey.value = selectKey

})

/* 菜单选中事件 */
function menuSelectEvt(index) {
    let path = ''
    for (let it of menuList) {
        for (let menu of it.children) {
            if (menu.index === index) {
                path = menu.path
                break
            }
        }
        if (!!path) break
    }

    router.push(path)
}


function quit(){
    console.log(store)
    router.push('/login')
    store.commit('common/setToken', '')
}

</script>

<style lang="less">
    @import "../style/common.less";
    .home-container {
        .rel();
        display: flex;
        > aside {
            flex: 0 0 200px;
            transition: all .25s linear;
            width: 0;
            background-color: @asid;
            > header {
                height: 48px;
                border-bottom: solid 1px @cd;
                color: rgb(226, 240, 221);
                line-height: 48px;
                font-weight: 700;
                text-align: center;
                &.hed{
                    font-size: 16px;
                }
            }
            > section {
                height: calc(100% - 48px);
                overflow-x: hidden;
            }
            /* aside.collapse */
            &.collapse {
                flex: 0 0 64px;
            }
        }
        > main {
            flex: 1;
            width: 0;
            > nav {
                display: flex;
                flex-wrap: nowrap;
                align-items: center;
                height: 48px;
                background-color: @cf;
                box-shadow: 2 3 12px rgba(110, 16, 157, 0.08);
                padding: 8px 12px;
                >.el-breadcrumb{
                    margin-left: 20px;
                }
            }
            > article {
                height: calc(100% - 48px);
                overflow-x: hidden;

                padding: 12px;
                background:#f2f5ff;
            }
        }
    }
</style>